<template>
  <div class="todo-item">
    <div class="todo-item-head">
      <h3>
        <el-tag v-if="data.degree===2" size="small" type="danger" style="margin-right:10px">重要任务</el-tag>
        <el-tag v-else size="small" type="info" style="margin-right:10px">普通任务</el-tag>
        {{data.title}}
      </h3>
      <p>
        {{data.startTime | dateFormat}} ~ {{data.endTime | dateFormat}}
      </p>
    </div>
    <div class="todo-item-main">
      {{data.main}}
    </div>
    <div class="todo-item-info">
      说明:{{data.info}}
    </div>
    <div class="todo-item-tags">
      <el-tag style="margin-right:10px" v-if="data.tags" v-for="(t,index) in data.tags" :key="index" size="small">{{t.name}}</el-tag>
    </div>
    <div class="todo-item-pro">
      <el-progress :percentage="data.pro" color="#8e71c7"></el-progress>
    </div>
    <div class="todo-item-action">
      <el-tag v-if="data.type===1" size="small" type="success" style="float:left">已完成</el-tag>
      <el-tag v-else size="small" type="danger" style="float:left">未完成</el-tag>
      <el-button v-if="data.type!==1" size="mini" @click="onTodoSuccess">标记完成</el-button>
      <el-button v-else size="mini" @click="onTodoNot">标记未完成</el-button>
      <el-button size="mini" @click="onTodoUpdate">修改</el-button>
      <el-button size="mini" @click="onTodoDel">删除</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'TodoItem',
  props: {
    data: {
        type:Object,
        default(){
            return {}
        }
    }
  },
  methods: {
    onDeleteItem() {
      //触发事件
      this.$emit('onDeleteItem', this.item.id)
    },
    onTodoSuccess(){
        this.$store.commit('todo/TODO_SUCCESS', this.data.id)
    },
    onTodoNot(){
        this.$store.commit('todo/TODO_NOT', this.data.id)
    },
    onTodoDel(){
        this.$store.commit('todo/TODO_DEL', this.data.id)
    },
    onTodoUpdate(){
        this.$emit('todoUpdate', this.data.id)
    }
  }
}
</script>
<style scoped>
.todo-item {
  padding: 15px;
  border-bottom: 1px solid #d0d0d0;
  background-color: #ffff;
  margin-bottom: 20px;
}
.todo-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
}
.todo-item-head h3 {
  font-weight: normal;
  font-size: 16px;
}
.todo-item-head p {
  font-size: 12px;
  color: #888;
}
.todo-item-main {
  color: #444;
  font-size: 13px;
  padding-bottom: 10px;
}
.todo-item-info {
  color: #444;
  font-size: 12px;
  padding-bottom: 10px;
}
.todo-item-action {
  text-align: right;
  padding: 5px 0;
}
.todo-item-pro {
  padding-top: 10px;
}
</style>


